<template>
  <aside class="mall-sidebar">
    <div class="mall-sidebar__section">
      <h3>推荐游戏</h3>
      <ul>
        <li v-for="game in recommendGames" :key="game.id" @click="goDetail(game.id || game.gameId)">
          <span>{{ game.gameName }}</span>
        </li>
      </ul>
    </div>
    <div class="mall-sidebar__section">
      <h3>热销榜</h3>
      <ul>
        <li v-for="game in hotGames" :key="game.id" @click="goDetail(game.id || game.gameId)">
          <span>{{ game.gameName }}</span>
        </li>
      </ul>
    </div>
    <div class="mall-sidebar__section">
      <h3>最新上架</h3>
      <ul>
        <li v-for="game in newGames" :key="game.id" @click="goDetail(game.id || game.gameId)">
          <span>{{ game.gameName }}</span>
        </li>
      </ul>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps<{
  recommendGames?: Array<any>
  hotGames?: Array<any>
  newGames?: Array<any>
}>()

function goDetail(gameId: number) {
  router.push(`/game-detail?id=${gameId}`);
}
</script>

<style scoped>
.mall-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  padding: 24px 0 0 0;
  min-height: 100vh;
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
}
.mall-sidebar__section {
  margin-bottom: 32px;
  padding: 0 20px;
}
.mall-sidebar__section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 2px solid #0078d7;
}
.mall-sidebar__section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mall-sidebar__section li {
  margin-bottom: 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f8f9fa;
}
.mall-sidebar__section li:hover {
  background: #e3f2fd;
  color: #0078d7;
  transform: translateX(4px);
}
.mall-sidebar__section span {
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  display: block;
}
.mall-sidebar__section span:hover {
  color: #0078d7;
}
</style> 